<template>
  <!-- 根元素包裹所有内容 -->
  <view class="navbar-container" >        
    <!-- 导航栏主体（带红色边框） -->
    <view class="nav-wrapper" >
      <view class="custom-navbar" :style="{ backgroundColor: color }">
        <!-- 返回按钮 -->
        <u-icon
          name="arrow-left"
          size="44"
          @click="emitBack"
          class="nav-back"
        />
        
        <!-- 标题 -->
        <text class="nav-title">{{ title }}</text>
        
        <!-- 右侧插槽 -->
        <view class="nav-right">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import {AppTheme} from '../../theme/appTheme.js'

export default {

  props: {
    title: {
      type: String,
      default: ''
    }
  },

  data() {
  return {
    color: AppTheme.mainBackgroundColor
  };
},

  methods: {
    emitBack() {
      this.$emit('back')
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.navbar-container {
  position: relative;
  width: 100%;
}

/* 导航栏包装器 */
.nav-wrapper {
  width: 100%;
}

/* 导航栏主体 */
.custom-navbar {
  display: flex;
  align-items: center;
   /* 兼容不同iOS版本 */
  height: calc(150rpx + constant(safe-area-inset-top)); /* iOS 11.0 */
  height: calc(150rpx + env(safe-area-inset-top)); /* iOS 11.2+ */

    /* 增加顶部内边距 */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  box-sizing: border-box;
  position: relative;
  border-bottom: 1rpx solid #eee;
}

/* 返回按钮样式 */
.nav-back {
  margin-right: 16rpx;
  cursor: pointer;
}

/* 标题样式 */
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 20rpx;
}

/* 右侧区域样式 */
.nav-right {
  min-width: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16rpx;
}
</style>